<script setup lang="ts" name="LoveTalk">//setup语法糖
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
let cars = ref({ brand: '奔驰', price: 100 }) //ref对象(层级不深)
let car = reactive({ brand: '奔驰', price: 100 }) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
let { brand, price } = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
let computedResult = computed({ //计算属性(ref响应式)
    get() {
    },
    set(val) {
    }
})
const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value

})
watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)

})
function generalMethod() { //一般方法

}

import { useTalkStore } from '@/store/loveTalk' //pinia读取数据
const talkStore = useTalkStore()
//console.log(talkStore.talkList)
//console.log(talkStore.$state.talkList)
function showLoveTalk() {
    talkStore.getTalk()
}
talkStore.$subscribe((mutate, state) => { //类似switch监视pinia数据变化
    console.log('store保存的数据发生变化', mutate, state)
    localStorage.setItem('talkList', JSON.stringify(talkStore.talkList))
})
</script>

<template> <!--template不编译-->
    <div class="component-name"> <!--vue3无需根标签-->
    </div>
    <div class="component-name">
        <button @click="showLoveTalk">pinia共享数据集中管理</button>{{ talkStore.talkList }}{{ talkStore.$state.talkList }}
    </div>
</template>

<style lang="less" scoped>
//less嵌套写法,scoped域:样式只对当前组件有效
.component-name {}
</style>